<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>移动开发</title>
    <link rel="stylesheet" href="style/index.css">
</head>
<body>
<!--导航栏-->
<div class="navbar">
    <div class="list">
        <ul>
            <li><a href="#">喜剧</a></li>
            <li><a href="#">恐怖</a></li>
            <li><a href="#">悬疑</a></li>
            <li><a href="#">科幻</a></li>
            <li><a href="#">动作</a></li>
            <li><a href="#">爱情</a></li>
        </ul>
    </div>
</div>
<!--搜索栏-->
<div class="search">
    <input type="text" placeholder="请输入电影名称">
    <a href="#">
        搜索
    </a>
</div>
<!--轮播广告-->
<div class="banner">
    <div>
        <a href="#">
            <img src="images/banner1.png" alt="">
        </a>
    </div>
</div>
<!--电影列表-->
<div class="movie-list">
    <!--热门电影-->
    <div class="hot">
        <div class="title">
            <h3>-热门电影-</h3>
            <a href="">更多>></a>
        </div>
        <div class="list">
            <div>
                <img src="images/hot1.webp" alt="">
                <h4>黑豹</h4>
            </div>
            <div>
                <img src="images/hot2.webp" alt="">
                <h4>红海行动</h4>
            </div>
            <div>
                <img src="images/hot3.webp" alt="">
                <h4>唐人街探案2</h4>
            </div>
            <div>
                <img src="images/hot4.webp" alt="">
                <h4>有爱同行</h4>
            </div>
        </div>
    </div>
    <!--喜剧电影-->
    <div class="xiju">
        <div class="title">
            <h3>-喜剧电影-</h3>
            <a href="">更多>></a>
        </div>
        <div class="list">
            <div>
                <img src="images/xiju1.jpg" alt="">
                <h4>羞羞的铁拳</h4>
            </div>
            <div>
                <img src="images/xiju2.jpg" alt="">
                <h4>乘风破浪</h4>
            </div>
            <div>
                <img src="images/xiju3.jpg" alt="">
                <h4>驴得水</h4>
            </div>
            <div>
                <img src="images/xiju4.jpg" alt="">
                <h4>西游降魔篇</h4>
            </div>
        </div>
    </div>
    <!-- 恐怖电影 -->
    <div class="kongbu">
        <div class="title">
            <h3>-恐怖电影-</h3>
            <a href="">更多>></a>
        </div>
        <div class="list">
            <div>
                <img src="images/kongbu1.jpg" alt="">
                <h4>小丑回魂</h4>
            </div>
            <div>
                <img src="images/kongbu2.jpg" alt="">
                <h4>招魂</h4>
            </div>
            <div>
                <img src="images/kongbu3.jpg" alt="">
                <h4>忌日快乐</h4>
            </div>
            <div>
                <img src="images/kongbu4.jpg" alt="">
                <h4>无名女尸</h4>
            </div>
        </div>
    </div>
    <!-- 悬疑电影 -->
    <div class="xuanyi">
        <div class="title">
            <h3>-悬疑电影-</h3>
            <a href="">更多>></a>
        </div>
        <div class="list">
            <div>
                <img src="images/xuanyi1.jpg" alt="">
                <h4>看不见的客人</h4>
            </div>
            <div>
                <img src="images/xuanyi2.jpg" alt="">
                <h4>金色梦乡</h4>
            </div>
            <div>
                <img src="images/xuanyi3.jpg" alt="">
                <h4>微光湖</h4>
            </div>
            <div>
                <img src="images/xuanyi4.jpg" alt="">
                <h4>妖猫传</h4>
            </div>
        </div>
    </div>
    <!-- 科幻电影 -->
    <div class="kehuan">
        <div class="title">
            <h3>-科幻电影-</h3>
            <a href="">更多>></a>
        </div>
        <div class="list">
            <div>
                <img src="images/kehuan1.jpg" alt="">
                <h4>银翼杀手</h4>
            </div>
            <div>
                <img src="images/kehuan2.jpg" alt="">
                <h4>正义联盟</h4>
            </div>
            <div>
                <img src="images/kehuan3.jpg" alt="">
                <h4>异星觉醒</h4>
            </div>
            <div>
                <img src="images/kehuan4.jpg" alt="">
                <h4>降临</h4>
            </div>
        </div>
    </div>
    <!-- 动作电影 -->
    <div class="dongzuo">
        <div class="title">
            <h3>-动作电影-</h3>
            <a href="">更多>></a>
        </div>
        <div class="list">
            <div>
                <img src="images/dongzuo1.jpg" alt="">
                <h4>战狼2</h4>
            </div>
            <div>
                <img src="images/dongzuo2.jpg" alt="">
                <h4>湄公河行动</h4>
            </div>
            <div>
                <img src="images/dongzuo3.jpg" alt="">
                <h4>速度与激情8</h4>
            </div>
            <div>
                <img src="images/dongzuo4.jpg" alt="">
                <h4>绣春刀2:修罗战场</h4>
            </div>
        </div>
    </div>
    <!-- 爱情电影 -->
    <div class="love">
        <div class="title">
            <h3>-爱情电影-</h3>
            <a href="">更多>></a>
        </div>
        <div class="list">
            <div>
                <img src="images/love1.jpg" alt="">
                <h4>秘密手稿</h4>
            </div>
            <div>
                <img src="images/love2.jpg" alt="">
                <h4>爱砸了</h4>
            </div>
            <div>
                <img src="images/love3.jpg" alt="">
                <h4>换爱大冒险</h4>
            </div>
            <div>
                <img src="images/love4.jpg" alt="">
                <h4>你的名字</h4>
            </div>
        </div>
    </div>
</div>

<script src="script/index.js">

</script>
</body>
</html>